<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>6.4.6 子向父的通信</title>
</head>
<body>
    <!--思路：1.在父组件中定义函数,在事件中关联定义的函数。2.在子组件中调用父组件中的函数-->

    <div id="componentCommunication">
        <!--<helele v-bind:num="a" v-on:reduce-event="reduce" v-on:add-event="add"></helele>-->
        <helele :num="a" @reduce-event="reduce" @add-event="add"/>
    </div>

    <!--<script src="node_modules/vue/dist/vue.js"></script>-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script type="text/javascript">
        var componentVar = {
            template:'<div><button v-on:click="handlerReduce">-</button><span>  {{num}}  </span><button v-on:click="handlerAdd">+</button></div>',
            props:['num'],
            methods:{
                handlerReduce:function(){
                    this.$emit('reduce-event') //自定义事件,调用父组件中定义的函数
                },
                handlerAdd:function(){
                    this.$emit('add-event') //自定义事件
                }
            }
        }

        var app = new Vue({
            el:"#componentCommunication",
            data:{
                a:0
            },
            components:{
                'helele':componentVar
            },
            methods:{
                add:function(){
                    this.a++;
                },
                reduce:function(){
                    this.a--;
                }
            }
        });
    </script>
</body>
</html>